<template>
	<view>
		<scroll-view class="scroll-list"
		:scroll-top="1"
		scroll-y="true"
		:scroll-with-animation="scrollAnimationOFF" 
		:scroll-into-view="scrollViewId" 
		:style="{height:winHeight + 'px'}" 
		@scroll="handleScroll">
			<view class="phone-list">
				<!-- #ifdef MP-ALIPAY || MP-BAIDU-->
				<view class="list-item" 
				
				:style="'width:'+(windowWidth-25)+'px'"
				v-for="(item, key) of phones" 
				:key="item.letter" 
				:id="item.letter">
					<view class="list-item-title">{{item.letter}}</view>
					<view class="list-item-phone" 
					@click="handleClick(innerItem)"
					hover-class="commonly-hover" 
					:hover-start-time="20" 
					:hover-stay-time="70" 
					v-for="innerItem in item.data"
					:key="innerItem.id"
					:data-name="innerItem.name"
					:data-id="innerItem.id"
					:data-lng_lat="innerItem.lng_lat"
					>
						<view  class="city-t" v-if="innerItem.type==1"> 城市</view >
						<view  class="station-t" v-if="innerItem.type==2"> 站点</view >
						<view > {{innerItem.name}}，</view>
						<view class="color-999 text-13"> {{innerItem.parent.name}}</view>
					</view>	
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-ALIPAY -->
				<view class="list-item" 
				
				v-for="(item, key) of phones" 
				:key="item.letter" 
				:id="item.letter">
					<view class="list-item-title">{{item.letter}}</view>
					<view class="list-item-phone" 
					@click="handleClick(innerItem)"
					hover-class="commonly-hover" 
					:hover-start-time="20" 
					:hover-stay-time="70" 
					v-for="innerItem in item.data"
					:key="innerItem.id"
					:data-name="innerItem.name"
					:data-id="innerItem.id"
					:data-lng_lat="innerItem.lng_lat"
					>
						<view  class="city-t" v-if="innerItem.type==1"> 城市</view >
						<view  class="station-t" v-if="innerItem.type==2"> 站点</view >
						<view class="line1" style="max-width: 50%;"> {{innerItem.name}}，</view>
						<view class="color-999 text-13 line1" style=" width: 120px;"> {{innerItem.parent.name}}</view>
					
					</view>
				</view>
				<!-- #endif -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"phone-list",
		props:{
			phones:Array,
			letter:String,
			scrollAnimationOFF:Boolean,
		},
		data () {
			return {
				winHeight:0,
				scrollTop:0,
				letterDetails:[],
				timer:null,
				windowWidth:0
			}
		},
		computed:{
			scrollViewId () {
				return this.letter
			}
		},
		mounted(){
			console.log("13", uni.getSystemInfoSync())
			var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			// #ifndef APP-PLUS
			this.winHeight = uni.getSystemInfoSync().windowHeight - 49.50 -40 -statusBarHeight
			//#endif
			
			//#ifdef APP-PLUS
			this.winHeight = uni.getSystemInfoSync().windowHeight - 100
			//#endif
			
			//#ifdef MP-ALIPAY
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			//#endif

		},
		methods:{
			filterType(type){
				switch (type) {
					case 0:
						return "省";
					case 1:
						return "城市";
					case 2:
						return "站点";
				}
				
			},
			handleClick (e) {
				this.$emit('handleClick',e)
			},
			handleScroll (e){
				if(this.letterDetails.length === 0){
					let view = uni.createSelectorQuery().in(this).selectAll('.list-item')
					view.boundingClientRect(data=>{
						let top = data[0].top
						data.forEach((item,index)=>{
							item.top = item.top - top
							item.bottom  = item.bottom - top
							this.letterDetails.push({
								id:item.id,
								top:item.top,
								bottom:item.bottom
							})
						})
					}).exec()	
				}
				
				const scrollTop = e.detail.scrollTop
				this.letterDetails.some((item,index)=>{
					if(scrollTop>=item.top && scrollTop <= item.bottom - 5){
						this.$emit('change',item.id)
						this.$emit('reset',true)
						return true
					}
				})
			}
		}
			
	}
</script>

<style>
	
	.commonly-hover{
		background-color: #eee;
	}
	
	.scroll-list{
		flex: 1;
		height: 100vh;
		overflow-y: hidden;
	}

	.phone-list{
		display: flex;
		background-color: #fff;
		flex-direction:column;
		position:relative;
		width: 100%;
	}
	
	.list-item {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap:wrap;
		height: 92upx;
		background-color: #fff;
		height: 100%;
		
	}
	
	.list-item >.list-item-phone{
		font-weight: normal;
	}
	
	.list-item-title{
		background-color: #f7f7f7;
		position: sticky;
		top: 0;
	}
	
	.list-item-title,.list-item-phone{
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #333;
		width: 100%;
		height: 92upx;
		line-height: 92upx;
		font-size: 14px;
		font-weight: bold;
		padding: 0 20upx;
		border-bottom: 1px solid #e5e5e5;
	}
	.city-t {
		background-color: #e8f7ff;
		color: #70bae6;
		padding: 0 4px;
		font-size: 10px;
		margin-right: 8px;
		height: 15px;
		line-height: 15px;
	}
	.station-t {
		background-color: #fff8e8;
		color: #ffb87b;
		padding: 0 4px;
		font-size: 10px;
		margin-right: 8px;
		height: 15px;
		line-height: 15px;
	}
	
	

</style>
